<template>
  <!--<img alt="Vue logo" src="./assets/logo.png" />-->
  <!--<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />-->

  <!--<TestUp :msg="hello"/>-->
  <!--<Upload></Upload>-->

  <!--<Xss></Xss>-->
  <!--<ShowToast></ShowToast>-->
  <Directive></Directive>

  <!--<v-md-editor-->
    <!--mode="editable"-->
    <!--@save="save"-->
    <!--@change="changeMD"-->
    <!--v-model="text"-->
    <!--height="400px"-->
    <!--:disabled-menus="[]"-->
    <!--@upload-image="handleUploadImage"-->
  <!--&gt;</v-md-editor>-->
  <!--<button @click="submit1">提交</button>-->
</template>

<script lang="ts">
  import Directive from './views/directive.vue';
  import {defineComponent} from 'vue'
  // import HelloWorld from './components/HelloWorld.vue'
  import Upload from './views/Upload';
  import Xss from './views/Xss';
  import ShowToast from './views/ShowToast.vue';
  // import {upload} from "./api/upload";

  export default defineComponent({
    name: 'App',
    data() {
      return {
        hello: 'hello',
        text: '# hello\n' +
          '```js\n' +
          '  var a = 10\n' +
          '```',
      }
    },
    methods: {

      save() {
        // console.log('保存');
      },
      submit1() {
        // console.log(this.text);

      },
      changeMD(text, html) {
        // console.log(text, html)

      },
      async handleUploadImage(event, insertImage, files) {
        // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
        console.log(insertImage, files);

        //let strImg = window.URL.createObjectURL(files[0])
        //console.log(strImg);

        let formData = new FormData();
        formData.append('file', files[0]);
        let {url} = await upload(formData);

        insertImage({url: 'http://' + url, desc: '图片'});

      }
    },
    components: {
      Upload,Xss,ShowToast,Directive
    }
  })
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
